<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <h:head>
        <title>F&amp;B Stakeholder MicroPortal - Add Unstructured Content Elements</title>
        <style type="text/css">
            .slot {
                width:400px;
                height:235px;
                display:block;
            }
        </style>
    </h:head>
    <h:body>
        <h:form prependId="false">
            <f:view beforePhase="#{addUnstructuredContentTemplateElementsManager.initView}">                                        
                <table width="800px;" align="center">
                    <tr>
                        <td><p:messages id="statusMessages"/> </td>
                    </tr>
                    <tr> 
                        <td>
                            <h:outputText value="#{addUnstructuredContentTemplateElementsManager.templateSelected}" style="font-weight: bold;" /> 
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <h:graphicImage value="#{addUnstructuredContentTemplateElementsManager.imageofTemplate}"/>
                        </td>
                    </tr> 
                    <tr> 
                        <td>
                            <h:outputText value="Select the content that you wish to edit in the drop down list below." style="font-weight: bold;" /> 
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <h:selectOneMenu id="selectContent" required="true" value="#{addUnstructuredContentTemplateElementsManager.panelSelected}" converter="panelContentConverter">
                                <f:selectItems value="#{addUnstructuredContentTemplateElementsManager.noOfPanels}"/>
                            </h:selectOneMenu>
                        </td>
                    </tr>
                    <tr><td><hr/></td></tr>
                    <tr> 
                        <td colspan="2">
                            <table>
                                <tr>
                                    <td><h:outputText value="Drag elements from the left panel to the right panel" style="font-weight: bold;"/></td>
                                </tr>
                                <tr>
                                    <td width="400px">
                                        <p:panel header="Elements Available">
                                            <h:graphicImage id="txt1" value="/images/TextElement.png" style="width:200px;height:80px;"/>
                                            <p:draggable for="txt1" revert="true" helper="clone"/>  <br/>
                                            <h:graphicImage id="img" value="/images/ImageElement.png" style="width:200px;height:80px;"/>
                                            <p:draggable for="img"  revert="true" helper="clone"/>  <br/>
                                            <p:graphicImage id="vid" value="/images/VideoElement.png" style="width:200px;height:80px;"/>
                                            <p:draggable for="vid"  revert="true" helper="clone" />  <br/>
                                        </p:panel>
                                    </td>
                                    <td width="400px">
                                        <p:fieldset legend="Elements Selected" styleClass="slot">
                                            <p:droppable tolerance="fit" onDropUpdate="selectedItem" dropListener="#{addUnstructuredContentTemplateElementsManager.elementsDropped}" activeStyleClass="ui-state-highlight" >  
                                                <p:outputPanel id="componentsSelected" styleClass="slot" >
                                                    <p:dataTable id="selectedItem" var="UnstructuredContentElementEntity" value="#{addUnstructuredContentTemplateElementsManager.selectedList}">
                                                        <p:column headerText="elementsSelected">  
                                                            <h:outputText value="#{UnstructuredContentElementEntity.name}" />  
                                                        </p:column>  
                                                        <p:column headerText="Order of display">  
                                                            <p:cellEditor>
                                                                <f:facet name="output">  
                                                                    <h:outputText value="#{UnstructuredContentElementEntity.displayOrder}" />  
                                                                </f:facet>  
                                                                <f:facet name="input">  
                                                                    <p:inputText value="#{UnstructuredContentElementEntity.displayOrder}" style="width:100%"/>  
                                                                </f:facet>
                                                            </p:cellEditor>
                                                        </p:column> 
                                                        <p:column headerText="Options">
                                                            <p:rowEditor />  
                                                        </p:column> 
                                                        <p:column style="width:100px">  
                                                            <p:commandButton update=":form:display" oncomplete="confirmDeleteElements.show()" image="ui-icon ui-icon-close" title="Delete">  
                                                                <f:setPropertyActionListener value="#{UnstructuredContentElementEntity}" target="#{addUnstructuredContentTemplateElementsManager.selectedElement}" />  
                                                            </p:commandButton>
                                                        </p:column>  
                                                    </p:dataTable>
                                                    <p:confirmDialog message="Are you sure?" width="200"  
                                                                     showEffect="explode" hideEffect="explode"  
                                                                     header="Confirm" severity="alert" widgetVar="confirmDeleteElements">  

                                                        <p:commandButton value="Yes sure" update="selectedItem" actionListener="#{addUnstructuredContentTemplateElementsManager.deleteElements}" oncomplete="confirmDeleteElements.hide()"/>  
                                                        <p:commandButton value="Not yet" onclick="confirmDeleteElements.hide()" type="button" />  
                                                    </p:confirmDialog>  
                                                    <p:commandButton id="btnSubmitPanel" actionListener="#{addUnstructuredContentTemplateElementsManager.addPanelComponents}" value="Confirm Elements" ajax="true" update="statusMessages panelsAdded componentsSelected"/>
                                                </p:outputPanel>   
                                            </p:droppable>                                       
                                        </p:fieldset> 
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <p:dataTable id="panelsAdded" var="UnstructuredContentPanelEntity" value="#{addUnstructuredContentTemplateElementsManager.templatePanels}" >
                                            <p:column headerText="Panels Added">  
                                                <h:outputText value="#{UnstructuredContentPanelEntity.panelName}" />  
                                            </p:column>  
                                            <p:column headerText="Elements added in the panel">  
                                                <p:dataList value="#{UnstructuredContentPanelEntity.unstructuredContentElement}" var="UnstructuredContentElementEntity">  
                                                    #{UnstructuredContentElementEntity.name} 
                                                </p:dataList> 
                                            </p:column>  
                                            <p:column style="width:100px">  
                                                <p:commandButton update=":form:display" oncomplete="confirmation.show()" image="ui-icon ui-icon-close" title="Delete">  
                                                    <f:setPropertyActionListener value="#{UnstructuredContentPanelEntity}" target="#{addUnstructuredContentTemplateElementsManager.selectedPanel}" />  
                                                </p:commandButton>
                                            </p:column>  
                                        </p:dataTable>
                                        <p:confirmDialog message="Are you sure?" width="200"  
                                                         showEffect="explode" hideEffect="explode"  
                                                         header="Confirm" severity="alert" widgetVar="confirmation">  

                                            <p:commandButton value="Yes sure" update="panelsAdded" actionListener="#{addUnstructuredContentTemplateElementsManager.delete}" oncomplete="confirmation.hide()"/>  
                                            <p:commandButton value="Not yet" onclick="confirmation.hide()" type="button" />  
                                        </p:confirmDialog>  
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p:commandButton id="btnConfirmPanel" actionListener="#{addUnstructuredContentTemplateElementsManager.addPanelDetails}" value="Add Panel Details" ajax="true"/>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </f:view>
        </h:form>
    </h:body>
</html>

